<template>
    <div class="main">
        <div class="header">
            <span v-if="editable">欢迎给我们提交帮助与反馈</span>
            <span v-else>我的反馈</span>
        </div>
        <van-cell-group inset title="部分信息">
            <van-field
                @input.native="changeTitle"
                required
                :value="field.title"
                label="标题"
                placeholder="请输入您需要反映的问题"
                :error="!field.title"
            />

            <van-field
                @input.native="changeDesc"
                required
                :value="field.desc"
                label="描述信息"
                placeholder="请详细一下您遇到的问题"
                :error="!field.desc"
                type="textarea"
                autosize
            />
            <van-field
                :value="field.position"
                label="位置信息"
                @clickInput.native="actionShow = true"
            />
        </van-cell-group>
        <van-cell-group inset title="上传截图（最多 5 张）">
            <van-uploader
                v-show="field.pictures.length <= 5 && editable"
                :max-count="5"
                @afterRead.native="uploadImage"
                @delete.native="deleteImage"
                :file-list="field.pictures"
                :deletable="true"
            ></van-uploader>
        </van-cell-group>
        <div style="flex: 1; padding: 16rpx"></div>
        <van-button v-if="editable" type="primary" block @click="upload"
            >提交反馈</van-button
        >
        <van-action-sheet
            v-if="editable"
            :show="actionShow"
            title="选择发生错误的位置"
            :close-on-click-overlay="true"
            :actions="positionOptions"
            @close.native="actionShow = false"
            @select.native="changePosition"
        >
        </van-action-sheet>
    </div>
</template>

<script>
import vanField from "@/wxcomponents/weapp/dist/field/index";
import vanCellGroup from "@/wxcomponents/weapp/dist/cell-group/index";
import Dialog from "@/wxcomponents/weapp/dist/dialog/dialog";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";

import vanActionSheet from "@/wxcomponents/weapp/dist/action-sheet/index";
import vanUploader from "@/wxcomponents/weapp/dist/uploader/index";
import $store from "@/store/index.js";
import { positionPath } from "../positionPath.js";
const createField = () => ({
    title: "",
    desc: "",
    pictures: [],
    position: "未知",
});
export default {
    props: {
        editable: {
            type: Boolean,
            default: true,
        },
    },
    components: {
        vanField,
        vanActionSheet,
        vanCellGroup,
        vanUploader,
    },
    data() {
        return {
            actionShow: false,
            field: createField(),
            positionOptions: positionPath.map((i) => ({
                name: i.text,
            })),
        };
    },
    methods: {
        changePosition({ detail }) {
            this.field.position = detail.name;
        },
        deleteImage({ detail }) {
            console.log(detail);
            this.field.pictures = this.field.pictures.filter(
                (i) => i.url !== detail.file.url
            );
        },

        uploadImage({ detail }) {
            const { url } = detail.file;
            console.log(detail);

            this.field.pictures.push({
                url: url,
                name: url,
                isImage: true,
                deletable: true,
            });
        },
        upload() {
            if (!this.field.title || !this.field.desc) {
                Notify({ type: "danger", message: "标题和描述不能为空哦！" });
                return null;
            }
            Dialog.confirm({
                title: "确定发送反馈",
            })
                .then(() => {
                    return $store.dispatch("uploadFeedback", this.field);

                    // on confirm
                })
                .then((res) => {
                    console.log(res);
                    this.field = createField();
                    Notify({ type: "success", message: "反馈完成" });
                })
                .catch((err) => {
                    Notify({ type: "danger", message: err });
                });
        },
        changeDesc({ detail }) {
            this.field.desc = detail;
        },
        changeTitle({ detail }) {
            this.field.title = detail;
        },
    },
};
</script>

<style lang="less" scoped>
.header {
    text-align: center;
    font-size: 36rpx;
    padding: 24rpx 0;
    color: #3c3c3c;
}
.main {
    display: flex;
    flex-direction: column;
    height: 100%;
}
</style>